<template>
<!-- 首页 企业优势单页 -->
  <div class="advantage">
    <el-row style="margin-top: 20px;">
      <el-col class="tagStyle" :span="8" :offset="11">
        <h5>拓展项目</h5>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" :offset="8">
        <img src="static/teacher-logo.png" alt="">
      </el-col>
    </el-row>
    <el-row style="margin-top:20px;">
      <el-col :span="4" :offset="2">
         <router-link to="/teamPage">
             <img style="width:119px;height:119px;" src="static/tzxl.png" alt="">
             <h4 style="margin-top:15px;margin-left:20px;">拓展训练</h4>
         </router-link>
      </el-col>
      <el-col :span="4" :offset="2">
            <router-link to="/teamPage">
                 <img style="width:119px;height:119px;" src="static/nx.png" alt="">
                 <h4 style="margin-top:15px;margin-left:20px;">体验式内训</h4>
            </router-link>
      </el-col>
        <el-col :span="4" :offset="2">
            <router-link to="/teamPage">
                 <img style="width:119px;height:119px;" src="static/smjj.png" alt="">
                 <h4 style="margin-top:15px;margin-left:36px;">沙漠掘金</h4>
            </router-link>
      </el-col>
        <el-col :span="4" :offset="2">
            <router-link to="/teamPage">
                <img style="width:119px;height:119px;" src="static/mgxl.png" alt="">
                <h4 style="margin-top:15px;margin-left:36px;">魔鬼训练</h4>
            </router-link>
      </el-col>
    </el-row>
      <el-row style="margin-top:40px;">
      <el-col :span="4" :offset="2">
         <router-link to="/teamPage">
             <img style="width:119px;height:119px;" src="static/cs.png" alt="">
             <h4 style="margin-top:15px;margin-left:20px;">真人CS</h4>
         </router-link>
      </el-col>
      <el-col :span="4" :offset="2">
            <router-link to="/teamPage">
                 <img style="width:119px;height:119px;" src="static/tsnh.png" alt="">
                 <h4 style="margin-top:15px;margin-left:20px;">特色年会</h4>
            </router-link>
      </el-col>
        <el-col :span="4" :offset="2">
            <router-link to="/teamPage">
                 <img style="width:119px;height:119px;" src="static/qwydh.png" alt="">
                 <h4 style="margin-top:15px;margin-left:36px;">趣味运动会</h4>
            </router-link>
      </el-col>
        <el-col :span="4" :offset="2">
            <router-link to="/teamPage">
                <img style="width:119px;height:119px;" src="static/qynx.png" alt="">
                <h4 style="margin-top:15px;margin-left:36px;">企业内训</h4>
            </router-link>
      </el-col>
    </el-row>
    <!--关于公司,企业文化,服务体系-->
    <el-row style="margin-top: 20px;background-color: #f7f7f7;">
      <el-col class="tagStyle" :span="8" :offset="11">
        <h5>关于我们</h5>
      </el-col>
    </el-row>
    <el-row style="background-color: #f7f7f7;">
      <el-col :span="8" :offset="8">
        <img src="static/teacher-logo.png" alt="">
      </el-col>
    </el-row>
    <el-row style="background-color: #f7f7f7;height: 40px;">
      <el-col>
      </el-col>
    </el-row>
    <el-row style="background-color: #f7f7f7;">
          <el-col :span="10" :offset="1">
            <el-card class="box-card" style="background-color: #299295;">
              <el-row>
                <el-col :span="14" style="color: white;margin-top: 15px;">
                    <p>关于力点</p>
                  <br>
                    <div style="line-height:150%;"> &nbsp;&nbsp;力点户外体验式培训同盟是一家专业的管理培训咨询公司，
                      一直致力于打造中国最大、最专业、最全面的管理培训咨询企业；
                      华东总部位于江苏苏州，目前在上苏州、无锡与上海设有分支机构，
                      并拥有庞大的服务网点，高覆盖、高效率、高精准的服务获得了众多家公司和机构的认可，
                      我们将以最专业的精神为您提供安全、经济、专业的服务。
                    </div>
                </el-col>
              </el-row>
              <div class="moreAbout"  @click="gotoAbout()">
                READ MORE >>
              </div>
              <div class="aboutPic">
                <img style="width:100%;height: 100%;" src="static/timg.jpg" alt="">
              </div>
             </el-card>
          </el-col>
          <el-col :span="9" :offset="3" >
              <template>
                <el-tabs :tab-position="tabPosition" style="margin-top:8%;background-color: #f7f7f7;">
                  <el-tab-pane label="公司简介" style="font-size: 18px;line-height: 35px;">
                    &nbsp; &nbsp;力点户外体验式培训同盟是一家专业的管理培训咨询公司，
                    一直致力于打造中国最大、最专业、最全面的管理培训咨询企业；
                    华东总部位于江苏苏州，目前在上苏州、无锡与上海设有分支机构，
                    并拥有庞大的服务网点，高覆盖、高效率、高精准的服务获得了众多家公司和机构的认可，
                    我们将以最专业的精神为您提供安全、经济、专业的服务。
                  </el-tab-pane>
                  <el-tab-pane label="企业文化" style="font-size: 18px;line-height: normal;">
                    <span style="color: red;">我们的使命：</span>
                    <p>我们致力为江苏的企事业单位提供最好的拓展培训，为培训提供最好的服务；</p>
                    <span style="color: red;">我们的愿景:</span>
                    <p>激发员工士气，营造良好的企业氛围，打造苏州专业、专一的拓展训练品牌，努力成为省内体验式陪训行业的领先者'</p>
                    <span style="color: red;">我们的理念：</span>
                    <p>您的要求就是我们的标准、您的满意就是我们的追求；</p>
                    <span style="color: red;"> 我们的态度：</span>
                    <p>专业 专注 专心 专一。</p>
                  </el-tab-pane>
                  <el-tab-pane label="服务体系" style="font-size: 18px;line-height: normal;">服务体系</el-tab-pane>
                </el-tabs>
              </template>
          </el-col>
      </el-row>

    <!--企业风采-->
    <el-row style="margin-top: 20px;">
      <el-col class="tagStyle" :span="8" :offset="11">
        <h5>企业风采</h5>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" :offset="8">
        <img src="static/teacher-logo.png" alt="">
      </el-col>
    </el-row>

    <!--视频图片切换-->
    <el-row>
        <el-col :span="1" style="margin-left: 43.5%;">
          <router-link to="/advantagePage/showPic">
            <div id="TabPic" @click="changeTabPic(1)"
                 style="text-align: center;line-height: 100%;" v-bind:style="{ color: activeColorPic }">
              照片
            </div>
          </router-link>
          <div  v-show="showPic"  style="width:60px;height:4px;background-color: #ff9265;margin-top:6px;margin-left:-4px;"></div>
        </el-col>
      <el-col :span="1">
        <div style="color: #4C6076;font-weight: bolder;text-align: center;">
          |
        </div>
      </el-col>
       <el-col :span="1">
         <router-link to="/advantagePage/showVideo">
           <div id="TabVideo" @click="changeTabPic(2)"
                style="text-align: center;" v-bind:style="{ color: activeColorVideo }">
             视频
           </div>
         </router-link>
         <div v-show="showVideo" style="width:60px;height:4px;background-color: #ff9265;margin-top:6px;margin-left:-4px;"></div>
        </el-col>
    </el-row>

    <!--路由渲染tab-->
    <el-row>
      <!--<companyPic></companyPic>-->
      <router-view></router-view>
    </el-row>

    <!--客户案例-->
    <el-row style="padding-top: 20px;background-color: #f7f7f7;">
      <el-col class="tagStyle" :span="8" :offset="11">
        <h5>客户案例</h5>
      </el-col>
    </el-row>
    <el-row style="background-color: #f7f7f7;">
      <el-col :span="8" :offset="8">
        <img src="static/teacher-logo.png" alt="">
      </el-col>
    </el-row>
    <el-row style="background-color: #f7f7f7;">
      <el-col>
          <div class="swiper-container" style="width: 100%;">
            <div class="swiper-wrapper" style="width: 100%;">
              <div class="swiper-slide" style="padding-right: 10px;padding-left: 10px;"> <img style="width: 100%;height:100%;padding:8%;"   src="static/1.jpg" alt=""></div>
              <div class="swiper-slide" style="padding-right: 10px;padding-left: 10px;"> <img style="width: 100%;height:100%;padding:8%;"   src="static/2.jpg" alt=""></div>
              <div class="swiper-slide" style="padding-right: 10px;padding-left: 10px;"> <img style="width: 100%;height:100%;padding:8%;"   src="static/3.jpg" alt=""></div>
              <div class="swiper-slide" style="padding-right: 10px;padding-left: 10px;"> <img style="width: 100%;height:100%;padding:8%;"   src="static/4.jpg" alt=""></div>
              <div class="swiper-slide" style="padding-right: 10px;padding-left: 10px;"> <img style="width: 100%;height:100%;padding:8%;"   src="static/5.jpg" alt=""></div>
              <div class="swiper-slide" style="padding-right: 10px;padding-left: 10px;"> <img style="width: 100%;height:100%;padding:8%;"   src="static/6.jpg" alt=""></div>
            </div>
          </div>
      </el-col>
    </el-row>
    <el-row style="background-color: #f7f7f7;">
      <el-col :span="8">
        <router-link to="/teamPage">
          <img style="width: 80%;padding:8%;"   src="static/khal4.jpg" alt="">
        </router-link>
      </el-col>
      <el-col :span="8">
        <router-link to="/teamPage">
          <img style="width: 80%;padding:8%;"   src="static/khal5.jpg" alt="">
        </router-link>
      </el-col>
      <el-col :span="8">
        <router-link to="/teamPage">
          <img style="width: 80%;padding:8%;"  src="static/khal4.jpg" alt="">
        </router-link>
      </el-col>
    </el-row>
    <el-row style="background-color: #f7f7f7;">
      <el-col :span="8">
        <router-link to="/teamPage">
          <img style="width: 80%;padding:8%;"   src="static/khal4.jpg" alt="">
        </router-link>
      </el-col>
      <el-col :span="8">
        <router-link to="/teamPage">
          <img style="width: 80%;padding:8%;"   src="static/khal5.jpg" alt="">
        </router-link>
      </el-col>
      <el-col :span="8">
        <router-link to="/teamPage">
          <img style="width: 80%;padding:8%;"  src="static/khal4.jpg" alt="">
        </router-link>
      </el-col>
    </el-row>
    <!--公司新闻-->
    <el-row style="margin-top: 20px;">
      <el-col class="tagStyle" :span="8" :offset="11">
        <h5>公司新闻</h5>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" :offset="8">
        <img src="static/teacher-logo.png" alt="">
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10" :offset="1">
        <div id="news">
          <router-link to="/teamPage">
            <el-row>
              <el-col :span="6" style="background-color: #f7f7f7;height: 100px;text-align: center;">
                <div class="new-date" style="height: 100%;padding-top: 16px;color: #000;">
                  <span style="font-size: 40px;font-family: 幼圆;">4.13</span>
                  <br>
                  <span style="font-size: 22px;font-family: 幼圆;padding-left: 10px;">2017</span>
                </div>
              </el-col>
              <el-col :span="17" :offset="1" style="padding-top: 50px;" class="new-content">
                <p style="font-size: 20px;font-weight: bolder;">慕名360推广拓展营：季度冲刺，我最强！…</p>
                <br>
                <span  class="new-contentBefor">江苏慕名网络科技有限公司致力于搜索引擎营销及互联网安全网站建设服务。公司团队拥…</span>
              </el-col>
            </el-row>
          </router-link>
          <router-link to="/teamPage">
            <el-row>
              <el-col :span="6" style="background-color: #f7f7f7;height: 100px;text-align: center;">
                <div class="new-date" style="height: 100%;padding-top: 16px;color: #000;">
                  <span style="font-size: 40px;font-family: 幼圆;">4.13</span>
                  <br>
                  <span style="font-size: 22px;font-family: 幼圆;padding-left: 10px;">2017</span>
                </div>
              </el-col>
              <el-col :span="17" :offset="1" style="padding-top: 50px;" class="new-content">
                <p style="font-size: 20px;font-weight: bolder;">慕名360推广拓展营：季度冲刺，我最强！…</p>
                <br>
                <span  class="new-contentBefor">江苏慕名网络科技有限公司致力于搜索引擎营销及互联网安全网站建设服务。公司团队拥…</span>
              </el-col>
            </el-row>
          </router-link>
          <router-link to="/teamPage">
            <el-row>
              <el-col :span="6" style="background-color: #f7f7f7;height: 100px;text-align: center;">
                <div class="new-date" style="height: 100%;padding-top: 16px;color: #000;">
                  <span style="font-size: 40px;font-family: 幼圆;">4.13</span>
                  <br>
                  <span style="font-size: 22px;font-family: 幼圆;padding-left: 10px;">2017</span>
                </div>
              </el-col>
              <el-col :span="17" :offset="1" style="padding-top: 50px;" class="new-content">
                <p style="font-size: 20px;font-weight: bolder;">慕名360推广拓展营：季度冲刺，我最强！…</p>
                <br>
                <span  class="new-contentBefor">江苏慕名网络科技有限公司致力于搜索引擎营销及互联网安全网站建设服务。公司团队拥…</span>
              </el-col>
            </el-row>
          </router-link>
        </div>
      </el-col>

      <el-col :span="10" :offset="2">
        <el-card :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span>拓展基地</span>
          </div>
          <!--<img style="width: 100%;height: 120px;" src="static/1.jpg" class="image">-->
          <div >
            <div class="bottom clearfix">
              <ul style="list-style: none">
                <router-link to="/teamPage">
                  <li>
                    <el-row>
                      <el-col :span="6">
                        <img style="width:80px;height: 55px; " src="static/jidi-1.bmp" alt="">
                      </el-col>
                      <el-col :span="18">
                        <p >苏州MOKUMOKU (牧谷)农场训练基地…</p>
                        <br>
                        <span>
                          灵峰牧谷农场位于苏州市相城区北桥街道灵峰现代农业示范园，占地面积1000余亩，历时2…
                        </span>
                      </el-col>
                    </el-row>
                  </li>
                </router-link>
                <router-link to="/teamPage">
                  <li>
                    <el-row>
                      <el-col :span="6">
                        <img style="width:80px;height: 55px; " src="static/jidi-2.jpg" alt="">
                      </el-col>
                      <el-col :span="18">
                        <p >苏州白马涧生态园…</p>
                        <br>
                        <span>
                         白马涧生态园位于苏州高新区枫桥街道西部，是苏州西部旅游区的重要组成部分，占地7平方…
                        </span>
                      </el-col>
                    </el-row>
                  </li>
                </router-link>
                <router-link to="/teamPage">
                  <li>
                    <el-row>
                      <el-col :span="6">
                        <img style="width:80px;height: 55px; " src="static/jidi-3.jpg" alt="">
                      </el-col>
                      <el-col :span="18">
                        <p >苏州太湖绿光开心农场…</p>
                        <br>
                        <span>
                          苏州太湖绿光开心农场在苏州西山岛入口处，位于太湖边上，占地500多亩，以香草花卉和蔬…
                        </span>
                      </el-col>
                    </el-row>
                  </li>
                </router-link>
                <router-link to="/teamPage">
                  <li>
                    <el-row>
                      <el-col :span="6">
                        <img style="width:80px;height: 55px; " src="static/jidi-4.jpg" alt="">
                      </el-col>
                      <el-col :span="18">
                        <p >苏州东山乐活岛…</p>
                        <br>
                        <span>
                          苏州东山乐活岛拓展训练基地位于苏州市临湖镇湖桥村，距苏州绕城高速（S58）东山出口仅…
                        </span>
                      </el-col>
                    </el-row>
                  </li>
                </router-link>
              </ul>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!--师资力量-->
    <el-row style="margin-top: 20px;">
      <el-col class="tagStyle" :span="8" :offset="11">
        <h5>名师团队</h5>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" :offset="8">
        <img src="static/teacher-logo.png" alt="">
      </el-col>
    </el-row>
    <!--all teacher-->
    <el-row>
      <el-col :span="4" v-for="item in teachers" :key="item.xh" :offset="item.xh >1 ? 2 : 1">
        <el-collapse-transition>
        <el-card :body-style="{ padding: '0px' }" style="margin-top: 5px;" >
          <img style="margin-left: 10%;border-radius: 15px;" v-bind:src="[baseUrl+'/'+item.img]">
          <div style="padding: 14px;">
            <span style="font-weight: bolder">{{item.name}}</span>
            <el-rate
              v-model=item.score
              disabled
              score-template="{value}">
            </el-rate>
            <div class="bottom clearfix">
              <el-tooltip placement="top">
                <div slot="content">{{item.name}}<br/>星级:{{item.score}}</div>
                <el-button type="text" class="button" @click="noticeCoach(item)">查看详情</el-button>
              </el-tooltip>
            </div>
          </div>
        </el-card>
        </el-collapse-transition>
      </el-col>
    </el-row>

    <!--联系我们-->
    <el-row style="margin-top: 20px;">
      <el-col class="tagStyle" :span="8" :offset="11">
        <h5>联系我们</h5>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" :offset="8">
        <img src="static/teacher-logo.png" alt="">
      </el-col>
    </el-row>


  </div>
</template>

<script>
  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.min.css';
  import request from '@/api/request';
  import * as  constant from '@/Constant/constant';
  import companyPic from '@/components/utils/companyPic';
export default {
  name: "Advantage",
  components: {companyPic},

  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      isrouter: false,
      activeColorPic:'#ff9265',
      activeColorVideo:'#000000',
      showPic:true,
      showVideo:false,
      tabPosition: 'left',
      baseUrl:constant.BASE_URL,
      banners:[
        {'bg':'1.jpg'},
        {'bg':'2.jpg'},
        {'bg':'3.jpg'}
      ],
      teachers:[]
    };
  },
  watch:{
    "$route":"getPath"  // 监听路由事件
  },
mounted:function () {
  this.showPic=true;
    var elm=document.getElementsByClassName("el-card__header");
    for(var i=0;i<elm.length;i++){
      elm[i].style.color = 'white';
      elm[i].style.backgroundColor="rgb(84,92,100)";
    }
  var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    slidesPerView : 3,
    centeredSlides : true,
    autoplay : {
      delay:1500
    },
    speed:300,
  })
  this.getAllTeachers();
},
  methods: {
    //路由变化触发函数
    getPath:function () {
      let path = this.$route.path;    //或得当前路径
      if(path=='/advantagePage/showPic' || path=='/advantagePage'){
        this.showPic=true;
        this.showVideo=false;
        this.activeColorPic='#ff9265';
        this.activeColorVideo='#000000';
      }else if(path=='/advantagePage/showVideo'){
        this.activeColorPic='#000000';
        this.activeColorVideo='#ff9265';
        this.showPic=false;
        this.showVideo=true;
      }
    },
    //tab页切换
    changeTabPic:function (i) {
      if(i==1){
        this.showPic=true;
        this.showVideo=false;
        this.activeColorPic='#ff9265';
        this.activeColorVideo='#000000';
      }else{
        this.activeColorPic='#000000';
        this.activeColorVideo='#ff9265';
        this.showPic=false;
        this.showVideo=true;
      }
    },
    getUserInfo:function(){
      request.getUserInfo('dango').then((data) => {
        debugger;
        if(data){
            alert(data);
        }else{
          this.$message({
            message: '请求失败',
            type: 'warning'
          });
        }
      });
    },
    //查看教练详情
    noticeCoach(item){
      this.$router.push(
        {
          name:'singleTeacher',
          params: {
            item:item
          }
        }
      );
    },
    gotoAbout(){//跳转到关于公司详情页面
      alert();
    },
    getAllTeachers(){
      request.getAllTeacherInfo().then((data)=>{
        if(data){//代表查询成功
          this.teachers=data.data;
        }else{
          this.$message({
            message: '请求失败',
            type: 'warning'
          });
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tagStyle {
  font-size: 34px;
  font-weight: bold;
  margin-top: 20px;
}
h5,
h6,
h4,
h1,
h2,
h3 ,
p{
  margin: 0px;
}
a {
  text-decoration: none;
}
.el-card{
  height: 340px;
}
.el-card__header{
  background-color: rgb(84, 92, 100);
}
ul{
  padding: 0;
}
  li{
    margin-top: 5px;
    color: #2d2f33;
    font-size: 12px;
  }li p{
  font-weight: bold;
     }
#news p:hover{
    cursor: pointer;
    text-decoration: red;
  }
.el-tabs__item{
  margin-top:20px;
}
.moreAbout{
  width: 140px;
  height: 40px;
  background-color: #000;
  text-align:center;
  line-height: 40px;
  bottom:-20px;position:
  absolute;
  color: white;
}
.moreAbout:hover{
  cursor: pointer;
}
  .aboutPic{
    width: 340px;
    height: 260px;
    top:10%;
    left:400px;
    position: absolute;
  }
#TabPic:hover {
  cursor: pointer;
  color:#ff9265;
}
#TabVideo:hover{
  cursor: pointer;
  color:#ff9265;
}
.new-date:hover{
  background-color: #ff9265;
  }
  .new-content:hover{
    background-color: #4f4d4e;
    color:#ffffff;
  }
  .new-contentBefor:hover{
    color:#ffffff;
  }
.new-contentBefor{
  color:#888888;
}
</style>
